import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

import Home from '../views/Home'
import Music from '../views/Music/music'
import MusicDetail from '../views/MusicDetail'

const routes = [
    {
        path: '/',
        element: <Home />
    },
    {
        path: '/music',
        element: <Music />,
        // routes: [
        //     {
        //         path: '/music/detail',
        //         element: <MusicDetail />
        //     }
        // ]
    },
    {
        path: '/music/detail',
        element: <MusicDetail />
    }
]

function ViewRoutes() {
    return (
        <Router>
            <Routes>
                {routes.map(item => {
                    return (
                        <Route key={item.path} path={item.path} element={item.element}></Route>
                    )
                })}
            </Routes>
        </Router>
    )
}

{/* <div>
    <Route key={item.path} path={item.path} element={item.element}></Route>
    {item.routes.map(val => {
        return (<Route key={val.path} path={val.path} element={val.element}></Route>)
    })}
</div> */}

export default ViewRoutes